/*
  ::-webkit-scrollbar               // 滚动条整体部分
  ::-webkit-scrollbar-button        // 滚动条两端的按钮
  ::-webkit-scrollbar-track         // 外层轨道
  ::-webkit-scrollbar-track-piece   // 内层轨道，滚动条中间部分（除去）
  ::-webkit-scrollbar-thumb         // 滚动条里面可以拖动的那个
  ::-webkit-scrollbar-corner        // 边角
  ::-webkit-resizer                 // 定义右下角拖动块的样式
  参考图片：https://images.gitee.com/uploads/images/2022/0617/095642_5bd9f1c3_7808621.png
  参考文献:
  https://juejin.cn/post/6844904004879843336#heading-3
  https://segmentfault.com/a/1190000012800450
*/
.mixinGetScrollbarStyle(@selectorClassName) {
  .@{selectorClassName}::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .@{selectorClassName}::-webkit-scrollbar-track {
    background-color: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .@{selectorClassName}::-webkit-scrollbar-thumb {
    background-color: @themeColor6;
    border-radius: 8px;
  }

  .@{selectorClassName}::-webkit-scrollbar-thumb:hover {
    background-color: @themeColor5;
  }

  .@{selectorClassName}::-webkit-scrollbar-corner {
    width: 0;
    height: 0;
    border-width: 8px 8px 8px 0;
    border-style: solid;
    border-color: transparent @themeColor6 transparent transparent;
  }

  //.@{selectorClassName}::-webkit-resizer {
  //  width: 0;
  //  height: 0;
  //  border-width: 8px 8px 8px 0;
  //  border-style: solid;
  //  border-color: transparent @themeColor6 transparent transparent;
  //  background-color: @themeColor6;
  //}


  // 兼容 IE9, FIXME: 此处没有 IE浏览器 可测，可能存在一定误差
  .@{selectorClassName} {
    scrollbar-arrow-color: @themeColor6;
    scrollbar-face-color: #333;
    scrollbar-3dlight-color: #666;
    scrollbar-highlight-color: @themeColor5;
    scrollbar-shadow-color: #999;
    scrollbar-darkshadow-color: #666;
    scrollbar-track-color: rgb(239, 239, 239);
    scrollbar-base-color: #f8f8f8;
  }
}

// 隐藏滚动条
.mixinHideScrollbar(@parentSelector, @childSelector) {
  .@{parentSelector} {
    overflow: hidden;
  }
  .@{childSelector} {
    // 解决ios上滑动不流畅
    -webkit-overflow-scrolling:touch;
  }
  // 谷歌
  .@{parentSelector}::-webkit-scrollbar{
    display: none;
  }
  // 火狐
  .@{parentSelector} {
    scrollbar-width: none;
  }
};

// 垂直居中
//.mixinPositionCenterVertically(@top, @left, @translate) {
//  position: absolute;
//  top: @{top};
//  left: @{left};
//  transform: @{translate};
//};

.textOverflowHide(@lines) {
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  -webkit-line-break: @lines;
}
